<template>
    <div class="container" :class="{ hideSideBarClass: isCollpaseRef }">
        <div class="left">
            <div style="height: 50px;background: green;">
                <ElButton @click="toggleCollapse">toggle</ElButton>
            </div>
            <div style="height: calc( 100% - 50px );">
                <MyMenu
                    :a-my-menu-item-array="menuItemArrayRefCal"
                    a-base-path="/menuTestView"
                    :a-is-collapse="isCollpaseRef"
                    :a-expend-width="300"
                    :a-menu-bg-color="cssGlobalVariableMap.get(TypeCssGlobalVariableEnum.MENU_BG)"
                    a-menu-collapse-duration="1.5s"
                ></MyMenu>
            </div>

            <ElButton @click="toggle">toggle</ElButton>
        </div>

        <div class="main">
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import MyMenu from "../my_menu_index.vue";
import { RouteRecordRaw } from "vue-router";
import { menuTestRoutes } from "./menu_test_routes";
import { TypeMyMenuItem } from "../my_menu_type";
import { cssGlobalVariableMap} from "@/utils/NslUtil4Css";
import { TypeCssGlobalVariableEnum } from "@/utils/util_type";
import { buildMenuItemArray } from "../my_menu_until";

const isCollpaseRef = ref(false);
function toggleCollapse(){
    isCollpaseRef.value=!isCollpaseRef.value;
}

onMounted(()=>{
    //console.log('in mymenu tesv view mounted');
    
})
let menuItem1 = {
    name: "route-1",
    path: "dir-1",
    icon: "el-icon-edit",
    title: "title-1",
    children: [
        {
            name: "route-1-1",
            path: "dir-1-1",
            icon: "el-icon-edit",
            title: "title-1-1",
            children: [
                {
                    name: "route-1-1-1",
                    path: "dir-1-1-1",
                    icon: "el-icon-edit",
                    title: "title-1-1-1",
                },
            ],
        },
    ],
};

let menuItem2 = {
    name: "route-2",
    path: "dir-2",
    icon: "el-icon-edit",
    title: "title-2",
    children: [
        {
            name: "route-2-1",
            path: "dir-2-1",
            icon: "el-icon-edit",
            title: "title-2-1",
            children: [
                {
                    name: "route-2-1-1",
                    path: "dir-2-1-1",
                    icon: "el-icon-edit",
                    title: "title-2-1-1",
                },
            ],
        },
        {
            name: "route-2-2",
            path: "dir-2-2",
            icon: "el-icon-edit",
            title: "title-2-2",
        },
        {
            name: "route-2-3",
            path: "https://www.126.com",
            icon: "el-icon-edit",
            title: "title-2-3",
        },
    ],
};

let menuItem3 = {
    name: "route-3",
    path: "dir-3",
    icon: "el-icon-edit",
    title: "title-3",
};

let menuItem4 = {
    name: "route-4",
    path: "https://www.126.com",
    icon: "el-icon-edit",
    title: "title-4",
};

let menuItemArrayRef = ref([menuItem1, menuItem2, menuItem3, menuItem4]);

const widthRef = ref(300);

const toggle = () => {
    isCollpaseRef.value = !isCollpaseRef.value;
    if (isCollpaseRef.value) {
        widthRef.value = 64;
    } else {
        widthRef.value = 300;
    }
};


let menuItemArray: TypeMyMenuItem[] = [];

menuItemArray=buildMenuItemArray(menuTestRoutes[0].children);


// buildMenuItemArrayByRoutes(0, menuItemArray, menuTestRoutes[0].children);
//console.log("menuItemArray", menuItemArray);

// orderMenuItemArray(menuItemArray);
//console.log("menuItemArray after ordered", menuItemArray);

menuItemArray=menuItemArray.concat(menuItemArray,menuItemArray,menuItemArray,menuItemArray)
const menuItemArrayRefCal = ref(menuItemArray);
</script>
<style lang="scss" scoped>
@import "../menu_color_variable.module.scss";
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    // display: flex;
    // justify-content: flex-start;
    // // align-items:normal;
    // align-items:stretch;
}

.left {
    // flex: 0 0 300px;
    position: fixed;
    width: $menuExpandWidth;
    height: 100%;
    background-color: $menuBg;
    // overflow-x: hidden;
    transition: width 1.5s;
}
.main {
    margin-left: $menuExpandWidth;
    background-color: skyblue;
    transition: margin-left 1.5s;
}


.hideSideBarClass .left{
    width: $menuCollapseWidth;
}
.hideSideBarClass .main{
    margin-left: $menuCollapseWidth;
}
</style>
